<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<th:block th:include="include :: header('发病信息录入')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-ncZhibao-add"  th:object="${ncZhibao}"  >
		<input id="zhibaoId" name="zhibaoId" class="form-control" type="hidden" th:value="${zhibaoId}">
		<div class="form-group">
			<label class="col-sm-3 control-label">发病原因：</label>
			<div class="col-sm-8">
				<input id="causes" name="causes" class="form-control" th:field="*{causes}" type="text" required>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">植保意见：</label>
			<div class="col-sm-8">
				<input id="proposal" name="proposal"  th:field="*{proposal}"  class="form-control" type="text" required>
			</div>
		</div>

		<div class="form-group">
			<label class="col-sm-3 control-label">施药方式：</label>
			<div class="col-sm-8">
				<select name="executeType" required class="form-control m-b"
						th:with="type=${@dict.getType('executeType')}">
					<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
				</select>
			</div>
		</div>
		<div id="zhibaoYao" class="form-group">
			<div class="col-sm-3 control-label">药品名称：</div>
			<div class="col-sm-3 control-label">数量：</div>
			<div class="col-sm-3 control-label">单位：</div>
			<div class="col-sm-3 control-label">药品批次：</div>
		</div>
		<div class="added-div" style="height: 100px;">
			<div class="col-sm-3">
				           <div class="form-group">
					                <div class="col-sm-8" style="margin-left: 80px">
						                    <div class="input-group">
							                       <input  name="drugName" class="form-control" type="text" onclick="selectMeterialTree(this)" required>
							                       <span class="input-group-addon"><i class="fa fa-search"></i></span>
							                   </div>
						                </div>
					          </div>
				 </div>
			  <div class="col-sm-3">
				            <div class="form-group">
					<div class="col-sm-8" style="margin-left: 80px">
						<input name="drugAmount" placeholder="请输入用药量" rou class="form-control" onkeyup=" value=value.replace(/^(0+)|[^\d]+/g,'')" min="0">
					</div>
					           </div>
				</div>
			<div class="col-sm-3">
				<div class="form-group">
					              <div class="col-sm-8" style="margin-left: 80px">
									  <select name="unit" required class="form-control m-b"
											  th:with="type=${@dict.getType('unitType')}">
										  <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									  </select>
						              </div>
					          </div>
				  </div>
			 <div class="col-sm-3">
				           <div class="form-group">
					                <div class="col-sm-6" style="margin-left: 60px">
						                    <input name="drugCode" placeholder="请输入药品批次号"  class="form-control" >

						                </div>
					              <button onclick="doRemove(this)" class="btn btn-danger btn-circle" type="button"><i class="fa fa-remove"></i></button>

					            </div>
				 </div>
			</div>


		<!--<div class="form-group">
			<label class="col-sm-3 control-label">备注：</label>
			<div class="col-sm-8">
				<textarea id="remark" name="remark" class="form-control valid" type="text" rows="4"></textarea>
			</div>
		</div>-->
	</form>
	<div>
		<button style="margin: 0px auto;display: table;" class="btn btn-new btn-primary btn-circle btn-lg"
				type="button"><i
				class="fa fa-plus"></i>
		</button>
	</div>

</div>

</form>
<div th:include="include::footer"></div>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<script th:inline="javascript">

	var zhibao=[[${zhibaoId}]];
    var index = 0;
    //新增一行
    $('.btn-new').click(function () {
        index++;
        addRows(index);
    });


    var prefix = ctx + "system/ncZhibao"
    $("#form-ncZhibao-add").validate({
        rules:{
            xxxx:{
                required:true,
            },
        },
        focusCleanup: true
    });
    $(function () {
        getPengsList();
    });
    /** 表单序列化成json字符串的方法  */

    function form2JsonString(formId) {

        var paramArray = $('#' + formId).serializeArray();

        /*请求参数转json对象*/
        var jsonObj={};
        $(paramArray).each(function(){

            jsonObj[this.name]=this.value;

        });


        // json对象再转换成json字符串

        return jsonObj;

    }

    function submitHandler() {
        var url=prefix+'/edit';
        if ($.validate.form()) {
            var data=form2JsonString("form-ncZhibao-add");
            data.yaos=submitH()
            console.log(data);
            myPost(url, data,
                function (data) {

                    if (data.code == 0) {
                        $.modal.close();
                        parent.$.modal.msgSuccess(data.msg);
                    } else {
                        layer.msg(data.msg);
                    }
                    parent.$('#bootstrap-table').bootstrapTable('refresh', {
                        silent: true
                    });
                    parent.$('#bootstrap-table-1').bootstrapTable('refresh', {
                        silent: true
                    });
                }, function (e) {
                    layer.msg("添加失败!");
                    parent.$('#bootstrap-table').bootstrapTable('refresh', {
                        silent: true
                    });
                    parent.$('#bootstrap-table-1').bootstrapTable('refresh', {
                        silent: true
                    });
                })
        }
    }

    /*增加一行 输入框*/
    function addRows(index, obj) {
        var str = '<div class="added-div" style="height: 100px;">' +
            '<div class="col-sm-3">' +
            '            <div class="form-group">' +
            '                <div class="col-sm-8" style="margin-left: 80px">' +
            '                    <div class="input-group">' +
            '                        <input  name="treeName_' + index + '" class="form-control" type="text" onclick="selectMeterialTree(this)"' +
            '                               required>' +

                '                        <span class="input-group-addon"><i class="fa fa-search"></i></span>' +
            '                    </div>' +
            '                </div>' +
            '            </div>' +
            ' </div>' +
            '  <div class="col-sm-3">' +
            '            <div class="form-group">' +
            '                <div class="col-sm-8" style="margin-left: 80px">' +
            '                    <input name="count_' + index + '" placeholder="请输入用药量" rou class="form-control" onkeyup=" value=value.replace(/^(0+)|[^\\d]+/g,\'\')">' +
            '                </div>' +
            '            </div>' +
            ' </div>';
        /* $('#zhibaoYao').append(str)*/
        var unitType=[[${unitType}]];
        var s=str+'<div class="col-sm-3">' +
            '           <div class="form-group">'+
            '                <div class="col-sm-8" style="margin-left: 80px">'+
            '                   <select name="unit_' + index + '" required class="form-control m-b">';
        for(var i=0;i<unitType.length;i++){
            s += "                  <option value='"+unitType[i].dictValue+"'>"+unitType[i].dictLabel+"</option>";

        }
        s+= "</select>" +
            "               </div>"+
            "           </div>" +
            "   </div>"+
            ' <div class="col-sm-3">' +
            '            <div class="form-group">' +
            '                <div class="col-sm-6" style="margin-left: 60px">' +
            '                    <input name="pici_' + index + '" placeholder="请输入药品批次号"  class="form-control" >' +

            '                </div>' +
            '               <button onclick="doRemove(this)" class="btn btn-danger btn-circle" type="button"><i class="fa fa-remove"></i></button> ' +

            '            </div>' +
            ' </div>' +
            ' </div>'
        $('#form-ncZhibao-add').append(s);
        $('#form-ncZhibao-add').change();


    }
    /*蔬菜管理-新增-选择父蔬菜树*/
    function selectMeterialTree(e) {
        c_element = e;
        var yaoId = $.common.isEmpty($("#treeId").val()) ? "141" : $("#treeId").val();
        var options = {
            title: '物资选择',
            width: "380",
            url: prefix + "/selectMeterialTree/" +yaoId,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }
    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $(c_element).attr('yaoId', body.find('#treeId').val());
            $(c_element).val(body.find('#treeName').val());
            layer.close(index);
        }
    }
    /*移除一行*/
    function doRemove(e) {
        $(e).parents(".added-div").remove();
    }
    function submitH() {

        var url = prefix + '/addyao'
        if ($.validate.form()) {
            var list = [];
            $('.added-div').each(function (i, e) {
                var e1 = $(e).find('input')[0];
                var e2 = $(e).find('input')[1];
                var e3 = $(e).find('select')[0];
                var e4 = $(e).find('input')[2];
                var obj = {yaoId: $(e1).attr('yaoId'),yaoName: $(e1).val(), yaoCount: $(e2).val(), unit: $(e3).val(),pici: $(e4).val()}
                list.push(obj)
            });
            return list;

        }
    }
    //获取历史数据
    function getPengsList() {
        var url = prefix + '/zhibaoList';
        myPost(url, {zhibaoId: zhibao},
            function (data) {
                if (data.code == 0) {
                    for (var i = 0; i < data.rows.length - 1; i++) {
                        addRows(i + 1);
                    }
                    $('.added-div').each(function (i, e) {
                        var obj = data.rows[i];
                        var input1 = $(e).find('input')[0];
                        var input2 = $(e).find('input')[1];
                        var select = $(e).find('select')[0];
                        var input3 = $(e).find('input')[2];
                        $(input1).attr('yaoId', obj.yaoId);
                        $(input1).val(obj.drugName);
                        $(input2).val(obj.drugAmount);
                        $(select).val(obj.unit);
                        $(input3).val(obj.drugCode);
                    });
                }
            }, function (e) {
                layer.msg(e.msg);
            })
    }

</script>
</body>
</html>
